import React from 'react';
import { Card, Row, Col, Statistic } from 'antd';
import {
  FileTextOutlined,
  ApiOutlined,
  DesktopOutlined,
  CloudServerOutlined,
  WarningOutlined
} from '@ant-design/icons';
import './styles.css';

const Overview: React.FC = () => {
  // 模拟数据
  const statistics = {
    operationLogCount: 1568,
    interfaceLogCount: 2356,
    resourceUsage: 65,
    serviceCount: 28,
    riskWarningCount: 3
  };

  return (
    <div >
      <h2 className="page-title">系统管理概览</h2>
      
      {/* 统计卡片 */}
      <Row gutter={[16, 16]} className="stats-row">
        <Col xs={24} sm={12} md={8}>
          <Card>
            <Statistic
              title="操作日志总数"
              value={statistics.operationLogCount}
              prefix={<FileTextOutlined />}
              valueStyle={{ color: '#1890ff' }}
            />
          </Card>
        </Col>
        <Col xs={24} sm={12} md={8}>
          <Card>
            <Statistic
              title="接口日志总数"
              value={statistics.interfaceLogCount}
              prefix={<ApiOutlined />}
              valueStyle={{ color: '#52c41a' }}
            />
          </Card>
        </Col>
        <Col xs={24} sm={12} md={8}>
          <Card>
            <Statistic
              title="资源使用率"
              value={statistics.resourceUsage}
              prefix={<DesktopOutlined />}
              suffix="%"
              valueStyle={{ color: statistics.resourceUsage > 80 ? '#ff4d4f' : '#1890ff' }}
            />
          </Card>
        </Col>
        <Col xs={24} sm={12} md={12}>
          <Card>
            <Statistic
              title="系统服务数"
              value={statistics.serviceCount}
              prefix={<CloudServerOutlined />}
              valueStyle={{ color: '#722ed1' }}
            />
          </Card>
        </Col>
        <Col xs={24} sm={12} md={12}>
          <Card>
            <Statistic
              title="风险预警数"
              value={statistics.riskWarningCount}
              prefix={<WarningOutlined />}
              valueStyle={{ color: statistics.riskWarningCount > 0 ? '#ff4d4f' : '#52c41a' }}
            />
          </Card>
        </Col>
      </Row>

      {/* 系统状态 */}
      <Card title="系统运行状态" className="status-card">
        <div className="system-status">
          <p>所有系统服���运行正常</p>
        </div>
      </Card>

      {/* 最近日志 */}
      <Card title="最近系统日志" className="log-card">
        <div className="log-list">
          <p>暂无日志数据</p>
        </div>
      </Card>
    </div>
  );
};

export default Overview; 